<template>
  <div class="statistics-container">
    <!-- 顶部统计 -->
<!--    <div class="statistics-top">-->
<!--      <a-row>-->
<!--        <a-col :span="6" class="pr8">-->
<!--          <a-card :bordered="false">-->
<!--            <a-statistic title="机器数量" suffix="台">-->
<!--              <template #formatter>-->
<!--                <a href="#/machine/list" title="跳转">-->
<!--                  {{ count.machineCount }}-->
<!--                </a>-->
<!--              </template>-->
<!--            </a-statistic>-->
<!--          </a-card>-->
<!--        </a-col>-->
<!--        <a-col :span="6" class="px8">-->
<!--          <a-card :bordered="false">-->
<!--            <a-statistic title="环境数量" suffix="个">-->
<!--              <template #formatter>-->
<!--                <a href="#/app/profile" title="跳转">-->
<!--                  {{ count.profileCount }}-->
<!--                </a>-->
<!--              </template>-->
<!--            </a-statistic>-->
<!--          </a-card>-->
<!--        </a-col>-->
<!--        <a-col :span="6" class="px8">-->
<!--          <a-card :bordered="false">-->
<!--            <a-statistic title="应用数量" suffix="个">-->
<!--              <template #formatter>-->
<!--                <a href="#/app/list" title="跳转">-->
<!--                  {{ count.appCount }}-->
<!--                </a>-->
<!--              </template>-->
<!--            </a-statistic>-->
<!--          </a-card>-->
<!--        </a-col>-->
<!--        <a-col :span="6" class="pl8">-->
<!--          <a-card :bordered="false">-->
<!--            <a-statistic title="日志数量" suffix="个">-->
<!--              <template #formatter>-->
<!--                <a href="#/log/list" title="跳转">-->
<!--                  {{ count.logCount }}-->
<!--                </a>-->
<!--              </template>-->
<!--            </a-statistic>-->
<!--          </a-card>-->
<!--        </a-col>-->
<!--      </a-row>-->
<!--    </div>-->

    <div class="generalCardGroup" style="padding: 24px">
      <a-row :gutter="48">
<!--        <a-col :span="6">-->
<!--          <a-card title="代码构建">-->
<!--            <a-tooltip slot="extra" title="[构建]编译代码构建生成docker">-->
<!--              <a-icon type="question-circle" theme="filled" />-->
<!--            </a-tooltip>-->
<!--            <template slot="actions">-->
<!--              <a-tooltip title="执行构建" placement="bottom">-->
<!--                <a-icon key="play-circle" type="play-circle" />-->
<!--              </a-tooltip>-->
<!--              <a-tooltip title="构建配置" placement="bottom">-->
<!--                <a-icon key="edit" type="edit" />-->
<!--              </a-tooltip>-->
<!--              <a-tooltip title="构建记录" placement="bottom">-->
<!--                <a-icon key="profile" type="profile" />-->
<!--              </a-tooltip>-->
<!--            </template>-->
<!--            <a-card-meta description="[构建]编译代码构建生成docker">-->
<!--            </a-card-meta>-->
<!--          </a-card>-->
<!--        </a-col>-->
        <a-col :span="8">
          <div>
            <div class="statistics-top">
              <a-row :gutter="12">
                <a-col :span="12">
                  <div class="small-card">
                    <a-row >
                      <a-col :span="8" class="svg-container">
                        <machine-svg></machine-svg>
                      </a-col>
                      <a-col :span="16" class="description-container">
                        <a-statistic title="机器数量" suffix="台">
                          <template #formatter>
                            <a href="#/machine/list" title="跳转" style="color: #dcd93e; ">
                              {{ count.machineCount }}
                            </a>
                          </template>
                        </a-statistic>
                      </a-col>
                    </a-row>
                  </div>
                  <div class="small-card">
                    <a-row>
                      <a-col :span="8" class="svg-container">
                        <environment-svg></environment-svg>
                      </a-col>
                      <a-col :span="16" class="description-container">
                        <a-statistic title="环境数量" suffix="个">
                          <template #formatter>
                            <a href="#/app/profile" title="跳转" style="color:	#00CD66">
                              {{ count.profileCount }}
                            </a>
                          </template>
                        </a-statistic>
                      </a-col>
                    </a-row>
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="small-card">
                    <a-row>
                      <a-col :span="8" class="svg-container">
                        <application-svg></application-svg>
                      </a-col>
                      <a-col :span="16" class="description-container">
                        <a-statistic title="应用数量" suffix="个">
                          <template #formatter>
                            <a href="#/app/list" title="跳转" style="color: #00BFFF">
                              {{ count.appCount }}
                            </a>
                          </template>
                        </a-statistic>
                      </a-col>
                    </a-row>
                  </div>
                  <div class="small-card">
                    <a-row>
                      <a-col :span="8" class="svg-container">
                        <log-svg></log-svg>
                      </a-col>
                      <a-col :span="16" class="description-container">
                        <a-statistic title="日志数量" suffix="个">
                          <template #formatter>
                            <a href="#/log/list" title="跳转" style="color: #b197fc">
                              {{ count.logCount }}
                            </a>
                          </template>
                        </a-statistic>
                      </a-col>
                    </a-row>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-col>
        <a-col :span="8" class="second-card">
          <a-card hoverable>
            <div style="text-align: center">
              {{pipelineDataName}}
            </div>
            <a-steps :current="99" progress-dot>
              <a-step v-for="item in pipelineData" :key="item.id" :title="item.nodeName" :description="pipelineDataBranch">

              </a-step>
            </a-steps>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card hoverable>
            <a href="http://120.48.68.245:9000/" title="跳转">
              <img
                slot="cover"
                alt="example"
                src="../assets/sonarqube.png"
                style="height: 80px; width: 280px;margin: 0 auto; display: block"
              />
            </a>
            <a-row style="margin-bottom: 10px; text-align: center">
              <span style="margin: 0 10px">分支</span>
              <a-select v-model="branch" size="small" style="width: 150px" @change="switchBranch" :title="branch">
                <a-select-option v-for="(item, index) of infoBranchList" :value="item" :key="index" :title="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-row>
            <a-row v-if="branch !== '-'" style="text-align: center">
              <a-col :span="8">
                <a-statistic title="bug" :value="branchData.bugTotal"/>
              </a-col>
              <a-col :span="8">
                <a-statistic title="异味" :value="branchData.codeSmellTotal"/>
              </a-col>
              <a-col :span="8">
                <a-statistic title="漏洞" :value="branchData.vulnerabilitieTotal"/>
              </a-col>
            </a-row>
            <div v-else style="text-align: center; font-size: large">暂无数据</div>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div style="padding: 24px">
      <pipeline-info></pipeline-info>
    </div>
    <div class="buildHistory">
      <build-history></build-history>
    </div>
  </div>
</template>

<script>
  import PipelineInfo from "../components/console/PipelineInfo";
  import BuildHistory from "../components/console/BuildHistory";
  import MachineSvg from "@/assets/machine.svg"
  import EnvironmentSvg from "@/assets/environment.svg"
  import ApplicationSvg from "@/assets/application.svg"
  import LogSvg from "@/assets/logs.svg"
export default {
  name: 'Console',
  components: {BuildHistory, PipelineInfo, MachineSvg, EnvironmentSvg, ApplicationSvg, LogSvg},
  data() {
    return {
      // 统计信息
      count: {
        machineCount: '-',
        profileCount: '-',
        appCount: '-',
        logCount: '-'
      },

      // sonarqube扫描代码分支统计信息
      sonarqubeInfo: [],
      infoBranchList: [],
      branch: '-', //选择分支键值，无数据为-
      branchData: {},

      // 流水线卡片信息
      pipelineData: [],
      pipelineDataBranch: '',
      pipelineDataName: ''
    }
  },
  methods: {
    // 加载统计信息
    getHomeStatistics() {
      this.$api.getHomeStatistics()
        .then(({ data }) => {
          this.count = data.count
        })
    },
    // 加载分支状态统计信息(sonarqube代码扫描结果数据)
    getSonarqubeInfo() {
      this.$api.getSonarqubeInfo().then(({ data }) => {
        this.sonarqubeInfo = data
        this.sonarqubeInfo.forEach((item) => {
          this.infoBranchList.push(item['projectKey']) //数据对象的键名为projectKey，前端叫做branch
        })
        this.branch = this.infoBranchList[0] //有数据的情况下默认选中第一个
        this.branchData = this.sonarqubeInfo[0]
      })
    },
    //切换分支数据
    switchBranch(value) {
      this.branchData = this.sonarqubeInfo.find(item => item.branch === value)
    },
    //流水线卡片数据
    getPipelineInfo() {
      this.$api.getBuildHistoryList().then(({ data }) => {
        this.pipelineData = data.data.historyVOList[0].nodesList
        this.pipelineDataBranch = data.data.historyVOList[0].branch
        this.pipelineDataName = data.data.historyVOList[0].pipelineName
      }).catch(() => {
      })
    }
  },

  mounted() {
    this.getHomeStatistics()
    this.getSonarqubeInfo()
    this.getPipelineInfo()
  }
}
</script>

<style lang="less" scoped>

.statistics-top {
  margin-bottom: 18px;
  .small-card {
    margin-bottom: 4px;
    height: 98px;
    border-radius: 15px;
    .svg-container {
      background-color: #3c658e;
      border-radius: 15px 0 0 15px;
      border: 1px solid #3c658e;
      height: 98px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .description-container {
      height: 98px;
      border: 1px solid #3c658e;
      border-radius: 0 15px 15px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      /deep/ .ant-statistic-title {
        color: #3c658e;
        font-size: 16px;
      }
      /deep/.ant-statistic-content{
        color: rgba(0,0,0,.45);
      }
    }
  }

  /deep/ .ant-card {
    height: 100px !important;
    text-align: center;
  }
}


.generalCardGroup .ant-card {
  height: 197px;
  border-radius: 20px;
  font-size: 16px;
  overflow: hidden;

      /deep/ .ant-card-head {
      height: 30px;
      margin-bottom: -1px;
      padding: 0 24px;
      color: rgba(0,0,0,.85);
      font-weight: 200;
      font-size: 16px;
      background: transparent;
      border-bottom: none;
      border-radius: 2px 2px 0 0;
      zoom: 1;
    }
      /deep/ .ant-card-body {
      padding: 10px;
      min-height: 100px;
      zoom: 1;
      height: 100%;
    }
  /deep/ .ant-steps-item-title {
    position: relative;
    display: inline-block;
    padding-right: 5px;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    line-height: 32px;
  }
  /deep/ .ant-steps-item-description, .ant-steps-item-subtitle {
    color: rgba(0,0,0,.45);
    font-size: 12px;
  }
}

.small-card:hover {
  transform: translateY(-2px);
  box-shadow: 2px 2px 4px #adabab;
  transition: all .3s;
}

.generalCardGroup .ant-card-hoverable {
  cursor: initial;
}

/deep/.second-card .ant-card-body {
  padding: 0 10px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
/deep/.ant-steps {
  overflow-x: auto;
  padding: 5px 0;
}


</style>
